<template>
    <div class="Distributed">
        <Left :state="state"></Left>
        <div class="middle">
            <Top @Down="Down"></Top>
            <p class="title1">分布式</p>
            <p class="title2">一段关于分布式的描述</p>
            <div class="content">


                <div class="content-box1">
                    <p class="title4">显示</p>
                    <div class="table-top">
                        <span class="name">名称</span>
                        <span class="state">状态</span>
                    </div>
                    <div class="element"
                         v-for="(item,index) in newNodeData "
                         :key="index"
                    >
                        <span class="element-name">{{item.value.exe_name}}</span>
                        <div class="text">
                            <div  :class="[item.value.value === true? 'circular1' :'circular2' ]"></div>
                            <span class="element-state" >{{item.value.value}}</span>
                        </div>
                    </div>
                </div>


                <div class="content-box2">
                    <span class="title5">重启</span>
                    <div class="content-top">
                        <p>已选1项</p>
                        <button class="start" @click="startUP">启动</button>
                    </div>
                    <div class="table-top">
                        <img src="../../assets/image/DistributedImg/bluebox.png" alt="">
                        <span class="name">名称</span>
                        <span class="operation">操作</span>
                    </div>
                    <div class="element"
                         v-for="(item,index) in newNodeData2"
                         :key="index"
                    >
                        <input type="checkbox" :value="item.exe_name" v-model="check" class="state"/>
                        <span class="name">{{item.exe_name}}</span>
                        <img src="../../assets/image/DistributedImg/start.png" alt="" class="ico">
                        <span class="start">启动</span>
                    </div>
                </div>
            </div>
            <div class="page">
                <div class="page-box1"><img src="../../assets/image/showImg/left.png" alt="" ></div>
                <div class="page-box1"></div>
                <div class="page-box1"><img src="../../assets/image/showImg/right.png" alt="" ></div>
                <div class="page-box2">13条/页</div>
                <span>跳至</span>
                <div class="page-box3"></div>
                <span>页</span>
            </div>
            <Bottom></Bottom>
        </div>
    </div>
</template>

<script>
    import Top from '../top/top'
    import Left from '../left/left'
    import Bottom from '../bottom/bottom'
    import axios from 'axios'

    export default {
        name: "Distributed",
        components:{
            Left,
            Top,
            Bottom
        },
        data(){
            return{
                newNodeData:[],  //左侧展示
                newNodeData2:[],  //右侧显示
                ip:'',
                port:'',
                exe_name: '',
                check:[],
                newData:[],
                state:3
            }
        },
        methods:{
            Down(){
                axios({
                    url:'http://192.168.3.21:8888/user/report/',
                    method:'get',
                }).then(res =>{
                    console.log(res);
                    let a = document.createElement('a');
                    a.href = res.config.url;
                    // a.target = '_blank';//在新窗口打开
                    a.click();
                })
            },

            //启动
            startUP(){
                console.log(this.check);
                var ip3 =localStorage.getItem('ip2');
                var port3 = localStorage.getItem('port2');
                // var exe_name3 = localStorage.getItem('exe_name2')
                // JSON.parse(JSON.stringify(exe_name3))
                // console.log(typeof(exe_name3))

                var data ={
                    ip: ip3,
                    port: port3,
                    exe_name: this.check
                };

                this.newData.push(data);
                console.log('++++++++++++++++++++++++++++')
                console.log(this.newData);


                console.log('------------------------');
                console.log(data);

                axios({
                    method:'post',
                    url:'http://192.168.3.21:8888/dispersed_bmp/restart_scrapy_redis_exe/',
                    data: this.newData
                }).then(res =>{
                    console.log(res)
                })
            },

            changUrl(i){
                this.ip = this.newNodeData2[i].ip;
                this.port = this.newNodeData2[i].port;
                this.exe_name = this.newNodeData2[i].exe_name;

                const ip2 = this.ip;
                localStorage.setItem('ip2', ip2);

                const port2 = this.port;
                localStorage.setItem('port2',port2);

                const exe_name2 = this.exe_name;
                localStorage.setItem('exe_name2',exe_name2);
            }

        },
        mounted() {
            //左侧展示
            axios({
                method:'get',
                url:'http://192.168.3.21:8888/dispersed_bmp/show/'
            }).then(res =>{
                console.log(res);
                console.log(res.data);
                for(let i=0; i<res.data.length ; i++){
                    this.newNodeData.push({});
                    this.newNodeData[i].ip = res.data[i].ip;
                    this.newNodeData[i].port = res.data[i].port;
                    this.newNodeData[i].value = res.data[i].value;
                }
            });


            //右侧显示
            axios({
                method:'get',
                url:'http://192.168.3.21:8888/dispersed_bmp/restart_scrapy_redis_exe/'
            }).then(res =>{
                console.log('============================');
                console.log(res);
                for(let i=0; i<res.data.length ; i++){
                    this.newNodeData2.push({});
                    this.newNodeData2[i].ip = res.data[i].ip;
                    this.newNodeData2[i].port = res.data[i].port;
                    this.newNodeData2[i].exe_name = res.data[i].exe_name;
                }
                console.log(this.newNodeData2);
            })


        }
    }
</script>

<style lang="less">
    .Distributed{
        position: absolute;
        width: 1920px;
        height:965px;
        background: #F5F7F9;
        opacity: 1;
        display: flex;
        .middle{
            width: 1580px;
            margin-left: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .title1{
                margin-top: 51px;
                align-self: flex-start;
                font-size: 28px;
                font-family: PingFang SC;
                font-weight: 800;
                color: #000000;
                opacity: 1;
            }
            .title2{
                align-self: flex-start;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #000000;
                opacity: 1;
            }
            .content{
                margin-top: 24px;
                width: 1580px;
                display: flex;
                justify-content: space-between;
                .content-box1{
                    width: 780px;
                    height: 650px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 10px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .title4{
                        align-self: flex-start;
                        margin-left: 28px;
                        margin-top: 28px;
                        font-size: 20px;
                        font-family: PingFang SC;
                        font-weight: 800;
                        color: #000000;
                        opacity: 1;
                    }
                    .table-top{
                        display: flex;
                        align-items: center;
                        width: 724px;
                        height: 50px;
                        background: #F5F7F9;
                        opacity: 1;
                        border-radius: 10px;
                        margin-top: 52px;
                        .name{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                           margin-left: 20px;
                            color: #000000;
                            opacity: 1;
                        }
                        .state{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            margin-left: 550px;
                            color: #000000;
                            opacity: 1;
                        }
                    }
                    .element{
                        width: 724px;
                        height: 50px;
                        background: #8cc5ff;
                        border-radius: 10px;
                        margin-top: 16px;
                        display: flex;
                        align-items: center;
                        .element-name{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                           margin-left: 20px;
                            color: #000000;
                            opacity: 1;
                            width: 580px;
                        }
                        .text{
                            display: flex;
                            align-items: center;
                        }
                        .circular1{
                            width: 8px;
                            height: 8px;
                            background: #17F166;
                            border-radius: 50%;
                            opacity: 1;
                        }
                        .circular2{
                            width: 8px;
                            height: 8px;
                            background: red;
                            border-radius: 50%;
                            opacity: 1;
                        }
                        .element-state{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            margin-left: 5px;
                            color: #000000;
                            opacity: 1;
                        }
                    }
                }
                .content-box2{
                    width: 780px;
                    height: 650px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 10px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .title5{
                        align-self: flex-start;
                        margin-left: 28px;
                        margin-top: 28px;
                        font-size: 20px;
                        font-family: PingFang SC;
                        font-weight: 800;
                        color: #000000;
                        opacity: 1;
                    }
                    .content-top{
                        display: flex;
                        width: 724px;
                        justify-content: space-between;
                        p{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            opacity: 1;
                        }
                        .start{
                            width: 78px;
                            height: 42px;
                            background: #17F166;
                            border-radius: 10px;
                            color: #ffffff;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            opacity: 1;
                            border: none;
                            outline: none;
                        }
                    }
                    .table-top{
                        display: flex;
                        align-items: center;
                        width: 724px;
                        height: 50px;
                        background: #F5F7F9;
                        opacity: 1;
                        border-radius: 10px;
                        margin-top: 12px;
                        img{
                             width: 20px;
                            height: 20px;
                            margin-left: 20px;
                        }
                        .name{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            margin-left: 10px;
                            color: #000000;
                            opacity: 1;
                        }
                        .operation{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            margin-left: 529px;
                            color: #000000;
                            opacity: 1;
                        }
                    }
                    .element{
                        width: 724px;
                        height: 50px;
                        background: #8cc5ff;
                        border-radius: 10px;
                        margin-top: 16px;
                        display: flex;
                        align-items: center;
                        .state{
                            width: 20px;
                            height: 20px;
                            margin-left: 20px;
                        }
                        .name{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            margin-left: 10px;
                            color: #000000;
                            opacity: 1;
                        }
                        .ico{
                            margin-left: 482px;
                            width: 10px;
                            height: 16px;
                        }
                        .start{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            margin-left: 10px;
                            color: #0E8BF8;
                            opacity: 1;
                        }
                    }

                }
            }
            .page{
                width: 390px;
                display: flex;
                align-self: flex-end;
                justify-content: space-around;
                align-items: center;
                /*margin-bottom: 94px;*/
                margin-top: 16px;
                .page-box1{
                    width: 32px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .page-box2{
                    width: 82px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
                .page-box3{
                    width: 48px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
                span{
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
            }
        }
    }


</style>
